<template>
  <div class="w">
    <i-pageBaby class="w">
      <div class="w" style="background-color: #fff">
        <div class="top">
          <div class="Eq Eq_type" style="margin-right:20px;display: flex;align-items: center;position: relative;">
            <span>设备类型：</span>
            <Select filterable @on-change="inputChange" size="small" v-model="option_type" style="width:150px">
              <Option v-for="item in Eq_type" :value="item.equipTypeNo" :key="item.equipTypeNo">{{ item.equipTypeName
                }}
              </Option>
            </Select>
          </div>
          <div class="Eq Eq_name" style="display: flex;align-items: center;position: relative; margin-right:20px;">
            <span>设备名称：</span>
            <Select filterable :placeholder="!option_type?'请先选择设备类型':Eq_name.length>0 ? '请选择':'暂无该类型设备'" size="small"
                    v-model="option_name" style="width:150px">
              <Option v-for="item in Eq_name" :value="item.equipId" :key="item.equipId">{{ item.equipName }}</Option>
            </Select>
          </div>
          <div style="margin-right:20px">
            <span>选择日期：</span>
            <DatePicker size="small" v-model="value1" format='yyyy-MM-dd' type="date" :options="options3"
                        placeholder="请选择日期" style="width: 150px"></DatePicker>
          </div>
          <div class="but" style="display: flex;">
            <div class="cx"
                 style="width:0.6rem;height: 0.28rem;background-color: #0893fd;color: #fff;border-radius: 0.04rem;text-align: center;line-height: 0.28rem;cursor: pointer;"
                 @click="query()">查询
            </div>
            <div class="cz"
                 style="margin-left:0.2rem;width:0.6rem;height: 0.28rem;border-radius: 0.04rem;text-align: center;line-height: 0.28rem;cursor: pointer;"
                 @click="Reset()">重置
            </div>
          </div>
        </div>
        <div class="content">
          <div class="con_item">
            <div class="con_sm">
              <div class="container-title">
                <div class="icon"></div>
                系统概况
              </div>
              <table>
                <tr>
                  <td>A相</td>
                  <td><span>最大值</span>{{voltageDeviation.aMaxValue | noDataFormat }}%</td>
                  <td><span>最小值</span>{{voltageDeviation.aMinValue | noDataFormat }}%</td>
                  <td><span>平均值</span>{{voltageDeviation.aAverageValue | noDataFormat }}%</td>
                </tr>
                <tr>
                  <td>B相</td>
                  <td><span>最大值</span>{{voltageDeviation.bMaxValue | noDataFormat }}%</td>
                  <td><span>最小值</span>{{voltageDeviation.bMinValue | noDataFormat }}%</td>
                  <td><span>平均值</span>{{voltageDeviation.bAverageValue | noDataFormat }}%</td>
                </tr>
                <tr>
                  <td>C相</td>
                  <td><span>最大值</span>{{voltageDeviation.cMaxValue | noDataFormat }}%</td>
                  <td><span>最小值</span>{{voltageDeviation.cMinValue | noDataFormat }}%</td>
                  <td><span>平均值</span>{{voltageDeviation.cAverageValue | noDataFormat }}%</td>
                </tr>
              </table>
              <div class="ys">
                <span></span>
                <span>A相</span>
                <span></span>
                <span>B相</span>
                <span></span>
                <span>C相</span>
              </div>
            </div>
            <div class="con_eca">
              <eca ref='eca' :voltageDeviation="this.voltageDeviation"></eca>
              <!--<img v-if=" !this.voltageDeviation || !this.voltageDeviation.listA || this.voltageDeviation.listA.length===0"-->
                   <!--class="no-data-echart" src="../../../../assets/img/zwsj.png" width="80"/>-->
            </div>
          </div>
          <div class="con_item">
            <div class="con_sm">
              <div class="container-title">
                <div class="icon"></div>
                电压波动检测
              </div>
              <table>
                <tr>
                  <td>A相</td>
                  <td><span>最大值</span>{{voltageWave.aMaxValue | noDataFormat }}%</td>
                  <td><span>最小值</span>{{voltageWave.aMinValue | noDataFormat }}%</td>
                  <td><span>平均值</span>{{voltageWave.aAverageValue | noDataFormat }}%</td>
                </tr>
                <tr>
                  <td>B相</td>
                  <td><span>最大值</span>{{voltageWave.bMaxValue | noDataFormat }}%</td>
                  <td><span>最小值</span>{{voltageWave.bMinValue | noDataFormat }}%</td>
                  <td><span>平均值</span>{{voltageWave.bAverageValue | noDataFormat }}%</td>
                </tr>
                <tr>
                  <td>C相</td>
                  <td><span>最大值</span>{{voltageWave.cMaxValue | noDataFormat }}%</td>
                  <td><span>最小值</span>{{voltageWave.cMinValue | noDataFormat }}%</td>
                  <td><span>平均值</span>{{voltageWave.cAverageValue | noDataFormat }}%</td>
                </tr>
              </table>
              <div class="ys">
                <span></span>
                <span>A相</span>
                <span></span>
                <span>B相</span>
                <span></span>
                <span>C相</span>
              </div>
            </div>
            <div class="con_eca">
              <ecb ref='ecb' :voltageWave='this.voltageWave'></ecb>
              <!--<img v-if=" !this.voltageWave || !this.voltageWave.listA || this.voltageWave.listA.length===0"-->
                   <!--class="no-data-echart" src="../../../../assets/img/zwsj.png" width="80"/>-->
            </div>
          </div>
          <div class="con_item">
            <div class="con_sm">
              <div class="container-title">
                <div class="icon"></div>
                三相不平衡曲线
              </div>
              <table style="bottom: -24px;">
                <tr>
                  <td style="width:35px">电流</td>
                  <td><span>最大值</span>{{balance.listI.maxValue | noDataFormat }}{{balance.listI.monitType || 'A'}}</td>
                  <td><span>最小值</span>{{balance.listI.minValue | noDataFormat }}{{balance.listI.monitType || 'A'}}</td>
                  <td><span>平均值</span>{{balance.listI.mverageValue | noDataFormat }}{{balance.listI.monitType || 'A'}}</td>
                </tr>
                <tr>
                  <td style="width:35px">电压</td>
                  <td><span>最大值</span>{{balance.listV.maxValue | noDataFormat }}{{balance.listV.monitType || 'V'}}</td>
                  <td><span>最小值</span>{{balance.listV.minValue | noDataFormat }}{{balance.listV.monitType || 'V'}}</td>
                  <td><span>平均值</span>{{balance.listV.mverageValue | noDataFormat }}{{balance.listV.monitType || 'V'}}</td>
                </tr>
              </table>
              <div class="ys">
                <span></span>
                <span>电流</span>
                <span></span>
                <span>电压</span>
              </div>
            </div>
            <div class="con_eca">
              <ecc ref='ecc' :data='this.balance'></ecc>
              <!--<img v-if=" !this.balance || !this.balance.threephaseList || this.balance.threephaseList.length===0"-->
                   <!--class="no-data-echart" src="../../../../assets/img/zwsj.png" width="80"/>-->
            </div>
          </div>
          <div class="con_item">
            <div class="con_sm">
              <div class="container-title">
                <div class="icon"></div>
                电压谐波畸变率曲线
              </div>
              <table>
                <tr>
                  <td>A相</td>
                  <td><span>最大值</span>{{voltageHarmonic.aMaxValue | noDataFormat }}%</td>
                  <td><span>最小值</span>{{voltageHarmonic.aMinValue | noDataFormat }}%</td>
                  <td><span>平均值</span>{{voltageHarmonic.aAverageValue | noDataFormat }}%</td>
                </tr>
                <tr>
                  <td>B相</td>
                  <td><span>最大值</span>{{voltageHarmonic.bMaxValue | noDataFormat }}%</td>
                  <td><span>最小值</span>{{voltageHarmonic.bMinValue | noDataFormat }}%</td>
                  <td><span>平均值</span>{{voltageHarmonic.bAverageValue | noDataFormat }}%</td>
                </tr>
                <tr>
                  <td>C相</td>
                  <td><span>最大值</span>{{voltageHarmonic.cMaxValue | noDataFormat }}%</td>
                  <td><span>最小值</span>{{voltageHarmonic.cMinValue | noDataFormat }}%</td>
                  <td><span>平均值</span>{{voltageHarmonic.cAverageValue | noDataFormat }}%</td>
                </tr>
              </table>
              <div class="ys">
                <span></span>
                <span>A相</span>
                <span></span>
                <span>B相</span>
                <span></span>
                <span>C相</span>
              </div>
            </div>
            <div class="con_eca">
              <ecd ref='ecd' :voltageHarmonic='this.voltageHarmonic'></ecd>
              <!--<img v-if="!this.voltageHarmonic || !this.voltageHarmonic.listA || this.voltageHarmonic.listA.length===0"-->
                   <!--class="no-data-echart" src="../../../../assets/img/zwsj.png" width="80"/>-->
            </div>
          </div>

        </div>
      </div>
    </i-pageBaby>
  </div>

</template>
<script>
import eca from "../../../../components/echarts/consimerchartsA.vue"
import ecb from "../../../../components/echarts/consimerchartsB.vue"
import ecc from "../../../../components/echarts/consimerchartsC.vue"
import ecd from "../../../../components/echarts/consimerchartsD.vue"
import moment from 'moment'
import {
    equipType,
    threephase,
    monitoring,
    archives
} from '../../../../api/scada.js'

export default {
    components: {
        eca,
        ecb,
        ecc,
        ecd
    },
    data: function () {
        return {
            nameWarn: false,
            typeWarn: false,
            ldy: '123',
            state1: '',
            state2: '',
            value1: '',
            option_type: null,
            option_name: null,
            options3: {
                disabledDate(date) {
                    return date && date.valueOf() > Date.now() - 86400000;
                }
            },
            Eq_type: [],
            Eq_name: [],
            balance: {listI:{},listV:{}}, //三项不平衡
            voltageDeviation: {}, //电压偏差监测统计
            voltageWave: {}, //电压波动监测统计
            voltageHarmonic: {}, //电压谐波畸变率统计,
        }
    },
    mounted() {
        equipType().then((res) => {
            this.Eq_type = res.result

        })
    },
    methods: {
        inputChange() {
            this.type()
        },
        type() {
            let _this = this
            let data = {
                equipTypeNo: _this.option_type
            }
            archives(data).then(res => {
                this.Eq_name = res.result
            })
        },
        query() {
            console.log(this.value1)
            if (this.option_name !== null && this.option_type !== null) {
                this.nameWarn = false
                this.typeWarn = false
                let data = {
                    equipId: this.option_name,
                    paramDate: moment(this.value1).format('YYYY-MM-DD'),
                }
                monitoring(data).then(res => {
                    this.voltageDeviation = res.result.voltageDeviation ////电压偏差监测统计
                    this.voltageWave = res.result.voltageWave //电压波动监测统计
                    this.voltageHarmonic = res.result.voltageHarmonic //电压谐波畸变率统计
                })
                threephase(data).then(res => {
                    this.balance = res.result || {listI:{},listV:{}}
                })
                this.$refs.ecc.aaa()
                this.$refs.eca.aaa()
                this.$refs.ecb.aaa()
                this.$refs.ecd.aaa()

            } else if (this.option_type == null || this.option_name == null) {
                if (this.option_type == null & this.option_name == null) {
                    this.typeWarn = true
                    this.nameWarn = true
                } else {
                    if (this.option_type == null) {
                        this.typeWarn = true
                    } else {
                        this.nameWarn = true
                    }
                }
            }
        },
        Reset() {
            this.value1 = '';
            this.option_type = '';
            this.option_name = '';
            this.Eq_name = [];
            console.log(this.option_type, '456')
        },
    }
}
</script>
<style scoped>
  table tr td:first-child  {
    text-align: left;
    width:26px;
  }
  table tr td~td  {
    text-align: left;
    width:110px;
  }
  table tr td~td span {
    padding:0 5px;
  }
  .container-title {
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: flex-start;

  }

  .container-title .icon {
    margin-right: 10px;
    width: 4px;
    height: 16px;
    background-color: #0893fd;
  }

  input {
    outline: none;
  }

  input.form-control:focus {

    outline: none;
    box-shadow: none;
  }

  .select-input {
    position: absolute;
    border: none;
    left: 30%;
    height: 80%;
    outline: none;
  }

  .Eq {
    position: relative;
  }

  .w {
    width: 100%;
    height: 100%;
    display: flex;
    flex-flow: column;
    overflow: auto;
  }

  .top {
    height: 0.6rem;
    padding:20px 20px 20px 20px;
    margin-bottom:20px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-shadow: 0px 1px 1px 0px rgba(30, 44, 65, 0.1);
  }

  select {
    width: 1.8rem;
    height: 0.3rem;
    border-radius: 0.04rem;
    padding-right: 0.04rem;
  }

  .cz {
    background-color: #fff;
    color: #6f6f6f;
    border: 1px solid #666;
  }

  .content {
    width: 100%;
    padding:0 20px;
    height:900px;
    display: flex;
    flex-flow: row wrap;
  }

  .con_item {
    width: 50%;
    height: 48%;
    margin-bottom:20px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
  }

  .con_eca {
    width: 100%;
    height: 80%;
    position: relative;
  }

  .no-data-echart {
    position: absolute;
    top:60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000
  }

  .con_sm {
    flex: 1;
    position: relative;
  }

  .con_sm p {
    color: #333;
    font-weight: bold;
    height: 0.24rem;
    width: 100%;
    display: flex;
    align-items: center;
    position: relative;
  }

  .con_sm p::before {
    content: " ";
    display: inline-block;
    width: 0.05rem;
    height: 100%;
    background-image: linear-gradient(#0dd5a2, #068968);
    margin-right: 0.1rem;
  }

  table {
    width: 47%;
    text-align: center;
    position: absolute;
    left: 120px;
  }

  table tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 0.3rem;
    padding: 0.1rem;
    background-color: #fcfcfc;
  }

  table tr:first-child td:first-child {
    color: #91d66e;
  }

  .ys span:nth-child(1) {
    background-color: #91d66e;
  }

  table tr:nth-child(2) td:first-child {
    color: #46a3f7;
  }

  .ys span:nth-child(3) {
    background-color: #46a3f7;
  }

  table tr:nth-child(3) td:first-child {
    color: #ff9900;
  }

  .ys span:nth-child(5) {
    background-color: #ff9900;
  }

  table tr td span {
    color: #999999;
    font-size: 0.14rem;
  }

  table tr td {
    color: #333333;
    font-size: 0.14rem;
  }

  .ys {
    position: absolute;
    right: 0.8rem;
    bottom: 0;
  }

  .ys span:nth-child(2n-1) {
    display: inline-block;
    width: 0.1rem;
    height: 0.1rem;
    border-radius: 0.5rem;
    margin: 0 0.1rem;
  }

  .dw {
    position: absolute;
    color: #999;
    left: 0.5rem;
    top: .8rem;
  }
</style>
